<template>
  <div class="employee">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="入职新增" name="add">
        <div class="add" v-if="isAddStaff == 0">
          <ul class="add-item item-bottom">
            <li @click="goPath(1)">
              <div><img src="../../assets/home/icon_xz.png" /></div>
              <span>单个新增员工</span>
            </li>
            <li @click="goPath(2)">
              <div><img src="../../assets/home/icon_sc.png" /></div>
              <span>批量上传员工</span>
            </li>
          </ul>
          <ul class="add-item item-top">
            <li @click="goPath(3)">
              <div><img src="../../assets/home/icon_dangan.png" /></div>
              <span>员工档案字段设置</span>
            </li>
          </ul>
        </div>
        <addstaff
          :changeAddStaff="changeAddStaff"
          v-else-if="isAddStaff == 1"
        />
        <batchupstaff :changeAddStaff="changeAddStaff" v-else />
      </el-tab-pane>
      <el-tab-pane label="员工花名册" name="name">
        <roster :goPath="goPath" :activeName='activeName'/>
      </el-tab-pane>
      <el-tab-pane label="报表" name="form" >
        <chart v-if="isForm"/>
      </el-tab-pane>
      <el-tab-pane label="设置" name="set">
        <rosterset />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import addstaff from "./components/addstaff.vue";
import batchupstaff from "./components/batchupstaff.vue";
import roster from "./components/roster";
import rosterset from "./components/rosterset";
import chart from "./components/chart";
export default {
  components: { addstaff, batchupstaff, roster, rosterset, chart },
  data() {
    return {
      activeName: "add", //当前选择的tabs
      isAddStaff: 0, //是否显示新增员工页面
      isForm:false,//是否显示图表页面
    };
  },
  watch: {
    isAddStaff(val, old) {},
  },
  methods: {
    //跳转不同子级
    goPath(type,page) {
      //page是否从花名册进来的新增
      if(page == 'name'){this.activeName = 'add'}
      if(type == 3){
        this.activeName = 'set'
      }else{
        this.isAddStaff = type;
      }
    },
    //子组件改变状态返回
    changeAddStaff(val) {
      this.isAddStaff = val;
    },
    handleClick(tab, event) {
      console.log(tab, event);
      //解决echarts宽度 100%变100px的问题
      if (tab.name === 'form') {
        this.isForm = true
      }
    },
  },
};
</script>